// pages/goods_detail/index.js
/*
1 发送请求 获取数据
2  点击轮播图 预览大图功能
    2.1 给轮播图绑定点击事件
    2.2 调用小程序API previewImage
3 点击加入购物车
    3.1 绑定点击事件
    3.2 获取缓存中的购物车数据 数组格式 对象格式也sing
    3.3 先判断当前的商品是否已经存在于购物车里边
    3.4 若已经存在 则需要修改数据（一般建议是给数据库传数据 但是这里就修改缓存
    3.5 若不存在购物车的数组中 直接给购物车数组添加一个新元素 新元素带上数量存缓存中
    3.6 弹出信息框 
4 商品收藏
    1 页面onshow时 加载缓存中商品收藏的数据
    2 判断收藏
        若已收藏 则改变页面的图标
        若无 则不变

    3 点击商品收藏按钮
        判断是否已存在与缓存数组中
        若已存在 则取消收藏
        若不存在 则把商品添加到收藏数组中 存入到缓存当中
    */

import {request} from "../../request/request"
Page({

    /**
     * 页面的初始数据
     */
    data: {
        goodsObj:{},
        isCollect:false
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onShow () {
        let pages = getCurrentPages();
        let currentPage = pages[pages.length - 1]
        let options = currentPage.options
        const {goods_id} = options
        this.getGoodsDetail(goods_id)
    },



    /* 获取商品详情数据 */
    async getGoodsDetail(goods_id){
        //这里不懂为什么goods_id要加括号
        const goodsObj = await request({url:'/goods/detail',data:{goods_id}})
        this.GoodsInfo = goodsObj;
        const that = this.GoodsInfo.data.message.goods_id;
        console.log(that);
        // /* 判断当前商品是否被收藏 */
        let collect = wx.getStorageSync("collect") || []
        let index = collect.findIndex(v=>v.data.message.goods_id === that)
        if(index === -1){
            console.log(this.data);
            this.setData({
                isCollect:false
            })
        }else {
            this.setData({
                isCollect:true
            })
        }

        this.setData({
            goodsObj:{
                goods_name:goodsObj.data.message.goods_name,
                goods_price:goodsObj.data.message.goods_price,
                // iphone部分手机不识别webp图片格式
                // 最好找后台改 或者自己让.webp => .jpg
                // 这里用的正则表达式 还没学。。
                goods_introduce:goodsObj.data.message.goods_introduce.replace(/\.webp/g,'.jpg'),
                goods_pics:goodsObj.data.message.pics,
                goods_id:goodsObj.data.message.goods_id
            }
        })

    },

    // 点击轮播图 放大预览
    handlePreviewImage(e){
        const urls = this.data.goodsObj.goods_pics.map(v=>v.pics_big_url)
        const current = e.currentTarget.dataset.url
        wx.previewImage({
            current,
            urls,
            success: (result)=>{
                console.log('成功调用');
            },
            fail: ()=>{},
            complete: ()=>{}
        });
    },

    //点击加入购物车
    handleCartAdd(e){
        let cart=wx.getStorageSync("cart")||[];
        // 判断商品对象是否存在于购物车数组中
        console.log(this.data.goodsObj.goods_id);
        let index=cart.findIndex(v=>v.goods_id===this.data.goodsObj.goods_id)
        if(index===-1){
            this.data.goodsObj.num=1
            this.data.goodsObj.checked = true;
            cart.push(this.data.goodsObj)
        }else{
            cart[index].num++
        }

        wx.setStorageSync("cart", cart);

        wx.showToast({
            title: '加入成功',
            icon: 'success',
            duration: 1500,
            mask: true,
            success: (result)=>{
                
            },
            fail: ()=>{},
            complete: ()=>{}
        });
    },

    /* 点击商品收藏图标 */
    handleCollect(){
      /* 获取缓存中商品收藏的数组 */
        let collect = wx.getStorageSync("collect") || []
        console.log(collect);
        let index = collect.findIndex(v=>v.data.message.goods_id === this.data.goodsObj.goods_id)
        console.log(index);
        this.setData({
            isCollect:!this.data.isCollect
        })
        if(this.data.isCollect){
            collect.push(this.GoodsInfo)
        }else{
            collect.splice(index , 1)
        }
        wx.setStorageSync("collect", collect);
        wx.showToast({
            title: this.data.isCollect?'收藏成功':'取消收藏',
            icon: 'success',
            duration: 1500,
            mask: true,
        });
    }
})